<template>
  <el-card>
    <el-row>
      <div v-if="books.length === 0" class="no-books">
        <el-empty description="空空如也">
          <el-button type="primary" plain>按钮</el-button>
        </el-empty>
      </div>
  <div class="book-container">
    <div v-for="(book, index) in books" :key="index" class="book-item">
      <img :src="book.picture" alt="Book Cover" class="book-cover" />
      <p class="book-title">{{ book.name }}</p>
      <p class="book-author">{{ book.author }}</p>
    </div>
  </div>
    </el-row>
    <el-row>
      <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="pageData.currentPage"
          :page-sizes="[6, 12, 18, 24]"
          :page-size=pageData.pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total">
      </el-pagination>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: "ReadBooks",
  data() {
    return {
      books: [],
      pageData:{
        currentPage:1,
        pageSize:6,
        total:0
      },
    };
  },
  created() {
    this.fetchReaderLendList();
  },
  methods: {
    async fetchReaderLendList() {
      try {
        const id = sessionStorage.getItem("id");
        const params = { ...this.pageData,id };
        const { data: res } = await this.$axios.get("reader/getReaderLendList", { params });
        this.tableData = res.data.records;
        this.pageData.total = res.data.total;
        this.books = res.data.records.map(record => ({
          picture: record.picture,
          name: record.name,
          author: record.author,
        }));
      } catch (error) {
        console.error("获取借阅记录失败", error);
      }
    },
    currentChange(val){
      this.pageData.currentPage=val
      this.fetchReaderLendList()
    },
    sizeChange(val){
      this.pageData.pageSize=val
      this.fetchReaderLendList()
    },
  },
}
</script>

<style scoped>
.book-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.book-item {
  padding: 20px;
  text-align: center;
  width: 180px; /* 设置宽度 */
  height: 224px; /* 设置高度 */
  box-sizing: border-box;
}

.book-cover {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.book-title {
  font-size: 18px;
  margin: 10px 0;
}

.book-author {
  font-size: 14px;
  color: #555;
}
.el-pagination{
  margin-top: 10px;
}
.no-books {
  text-align: center;
  padding: 62px;
  font-size: 16px;
  color: #999;
}
</style>